import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { getCategoryService } from '@/api/category'
import { onMounted, ref } from 'vue'

export const useCategory = () => {
  const route = useRoute()
  const categoryData = ref([])
  const getCategory = async (id) => {
    const res = await getCategoryService(id)
    categoryData.value = res.data.result
  }
  onMounted(() => {
    getCategory(route.params.id)
  })
  //如果只是路由参数变化，组件不会重新加载，所以需要监听路由变化，重新获取数据
  // 路由更新时重新获取数据，解决切换分类时数据不更新的问题，因为组件不会重新加载。将当前路由的id和当前分类id进行比较，不一致时重新获取数据
  onBeforeRouteUpdate((to) => {
    if (categoryData.value.id !== to.params.id) {
      getCategory(to.params.id) //跳转到新的分类页面时重新获取新的分类页的数据
    }
  })
  return {
    categoryData
  }
}
